<script setup>
import { ref } from 'vue'

const articleList = ref([])
// 定义请求参数对象
const params = ref({
  pageNo: 1,
  pageSize: 10,
  title: '',
  summary: ''
})

articleList.value = [
  {
    title: '学习java',
    categotyName: '这是分类名称',
    createTime: '2022-01-17 14:58:37',
    status: '0'
  }
]
</script>
<template>
  <page-container title="文章管理">
    <!-------------------------- 表单区域 -------------------------->
    <el-form inline>
      <el-form-item label="文章标题">
        <el-input
          v-model="params.title"
          placeholder="请输入文章标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章摘要">
        <el-input
          v-model="params.summary"
          placeholder="请输入文章摘要"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">搜索</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
    <!-------------------------- 表格区域 -------------------------->
    <el-table :data="articleList">
      <el-table-column label="文章标题" prop="title"></el-table-column>
      <el-table-column label="文章分类" prop="categoryName"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template #default="{ row }">
          <span>{{ row.status === '0' ? '已发布' : '草稿' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary">编辑</el-button>
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </page-container>
</template>
<style lang="scss" scoped></style>
